<!-- 危化品管理-基本资料-MSDS -->
<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="6">
            <el-form-item label="名称">
              <el-input v-model="listQuery.fcatname" placeholder="CAS号/名称" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="">
              <el-button type="primary" icon="el-icon-search" @click="getlist">查询</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

      <div class="JNPF-common-layout-main JNPF-flex-main">

        <template>
            <el-tabs v-model="activeName" @tab-click="handleClick">
             <el-tab-pane label="全部" name="first">
              <JNPF-table :data="list" border v-loading="loading">
                <el-table-column prop="FCATNO" label="化学品中文名" ></el-table-column>
                <el-table-column prop="FCATNAME" label="化学品英文名"></el-table-column>
                <el-table-column prop="FCAS" label="CAS号"></el-table-column>
                <el-table-column fixed="left" label="操作" width="80">
                  <template slot-scope="scope">
                    <el-button @click.native.prevent="insert(scope.row.FCATNO)" icon="el-icon-edit" type="text" size="small">
                      详情
                    </el-button>
                  </template>
                </el-table-column>
              </JNPF-table>
              <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" />
            </el-tab-pane>

            <el-tab-pane label="易制毒" name="second">
              <JNPF-table :data="list1" border v-loading="loading">
                <el-table-column prop="FCATNO" label="化学品中文名" ></el-table-column>
                <el-table-column prop="FCATNAME" label="化学品英文名"></el-table-column>
                <el-table-column prop="FCAS" label="CAS号"></el-table-column>
                <el-table-column fixed="left" label="操作" width="80">
                  <template slot-scope="scope">
                    <el-button @click.native.prevent="insert(scope.row.FCATNO)" icon="el-icon-edit" type="text" size="small">
                      详情
                    </el-button>
                  </template>
                </el-table-column>
              </JNPF-table>
              <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" />

            </el-tab-pane>

            <el-tab-pane label="易制爆" name="third">
              <JNPF-table :data="list2" border v-loading="loading">
                <el-table-column prop="FCATNO" label="化学品中文名" ></el-table-column>
                <el-table-column prop="FCATNAME" label="化学品英文名"></el-table-column>
                <el-table-column prop="FCAS" label="CAS号"></el-table-column>
                <el-table-column fixed="left" label="操作" width="80">
                  <template slot-scope="scope">
                    <el-button @click.native.prevent="insert(scope.row.FCATNO)" icon="el-icon-edit" type="text" size="small">
                      详情
                    </el-button>
                  </template>
                </el-table-column>
              </JNPF-table>
              <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" />

            </el-tab-pane>

            <el-tab-pane label="一般化学品" name="fourth">
              <JNPF-table :data="list3" border v-loading="loading">
                <el-table-column prop="FCATNO" label="化学品中文名" ></el-table-column>
                <el-table-column prop="FCATNAME" label="化学品英文名"></el-table-column>
                <el-table-column prop="FCAS" label="CAS号"></el-table-column>
                <el-table-column fixed="left" label="操作" width="80">
                  <template slot-scope="scope">
                    <el-button @click.native.prevent="insert(scope.row.FCATNO)" icon="el-icon-edit" type="text" size="small">
                      详情
                    </el-button>
                  </template>
                </el-table-column>
              </JNPF-table>
              <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" />

            </el-tab-pane>

            <el-tab-pane label="剧毒品" name="five">
              <JNPF-table :data="list4" border v-loading="loading">
                <el-table-column prop="FCATNO" label="化学品中文名" ></el-table-column>
                <el-table-column prop="FCATNAME" label="化学品英文名"></el-table-column>
                <el-table-column prop="FCAS" label="CAS号"></el-table-column>
                <el-table-column fixed="left" label="操作" width="80">
                  <template slot-scope="scope">
                    <el-button @click.native.prevent="insert(scope.row.FCATNO)" icon="el-icon-edit" type="text" size="small">
                      详情
                    </el-button>
                  </template>
                </el-table-column>
              </JNPF-table>
              <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" />

            </el-tab-pane>

            <el-tab-pane label="危险化学品" name="six">
              <JNPF-table :data="list5" border v-loading="loading">
                <el-table-column prop="FCATNO" label="化学品中文名" ></el-table-column>
                <el-table-column prop="FCATNAME" label="化学品英文名"></el-table-column>
                <el-table-column prop="FCAS" label="CAS号"></el-table-column>
                <el-table-column fixed="left" label="操作" width="80">
                  <template slot-scope="scope">
                    <el-button @click.native.prevent="insert(scope.row.FCATNO)" icon="el-icon-edit" type="text" size="small">
                      详情
                    </el-button>
                  </template>
                </el-table-column>
              </JNPF-table>
              <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" />

            </el-tab-pane>
          </el-tabs>
        </template>

        
        <Form ref="Form" :parelist="list" />
      </div>
    </div>
  </div>
</template>

<script>
  import Form from "./Form.vue"
  export default {
    name: 'shop',
    components: { Form },
    data() {
      return {
        activeName: 'first',
        fvisiblelist: [
          { id: "1", fullName: "是" },
          { id: "2", fullName: "否" },
        ],
        total: 0,
        list: [
        {
          "FCATNO": "2,3,4,6-四氯苯酚",
          "FCATNAME": "2,3,4,6-tetrachlorophenol",
          "FCAS": "58-90-2",
        },{
          "FCATNO": "硫酸肼",
          "FCATNAME": "hydrazine sulfate",
          "FCAS": "10034-93-2",
        },{
          "FCATNO": "2,2-二甲基-4-戊烯醛",
          "FCATNAME": "2,2-dimethyl-4-penteneal",
          "FCAS": "5497-67-6",
        },{
          "FCATNO": "十二烷基三氯硅烷",
          "FCATNAME": "dodecyltrichlorosilane",
          "FCAS": "4484-72-4",
        },{
          "FCATNO": "过氧化叔丁醇",
          "FCATNAME": "tert-butyl hydroperoxide",
          "FCAS": "75-91-2",
        }
        ,{
          "FCATNO": "硝酸锌",
          "FCATNAME": "zinc nitrate",
          "FCAS": "10196-18-6",
        }
        ],
        list1: [
        {
          "FCATNO": "2,3,4,6-四氯苯酚",
          "FCATNAME": "2,3,4,6-tetrachlorophenol",
          "FCAS": "58-90-2",
        },{
          "FCATNO": "硫酸肼",
          "FCATNAME": "hydrazine sulfate",
          "FCAS": "10034-93-2",
        },{
          "FCATNO": "2,2-二甲基-4-戊烯醛",
          "FCATNAME": "2,2-dimethyl-4-penteneal",
          "FCAS": "5497-67-6",
        },{
          "FCATNO": "十二烷基三氯硅烷",
          "FCATNAME": "dodecyltrichlorosilane",
          "FCAS": "4484-72-4",
        },{
          "FCATNO": "过氧化叔丁醇",
          "FCATNAME": "tert-butyl hydroperoxide",
          "FCAS": "75-91-2",
        }
        ],

        list3: [
        {
          "FCATNO": "2,3,4,6-四氯苯酚",
          "FCATNAME": "2,3,4,6-tetrachlorophenol",
          "FCAS": "58-90-2",
        },{
          "FCATNO": "硫酸肼",
          "FCATNAME": "hydrazine sulfate",
          "FCAS": "10034-93-2",
        },
        ],
        loading: false,
        listQuery: {
          page: 1,
          limit: 20,
          sort: "desc",
          sidx: "",
          fcatno: "",
          fcatname: ""
        },
      };
    },
    computed: {},
    created() {
    },
    methods: {
      insert(row) {
        //this.$refs.Form.init(row);
        let link = document.createElement('a');
        link.href = 'http://127.0.0.1/file/msds.pdf';
        link.target = '_blank'; // 在新窗口或新标签页中打开URL
        link.click();
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
    },
  };
</script>